<template>
  <div class="Login">
    <div class="con">
      <div class="con_top">
        <img src="../assets/logo.png" alt="" />
      </div>
      <el-form ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="登陆电话" prop="tel">
          <el-input
            v-model="admin.adminTel"
            placeholder="请输入电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="admin.adminPassword"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="dl">
          <el-button type="primary" @click="adminLogin()">登录</el-button>
          <el-button @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      admin: {
        adminTel: "",
        adminPassword: "",
      },
    };
  },

  methods: {
    //重置按钮
    reset() {
      (this.admin.adminTel = ""),
        (this.admin.adminPassword = "")
    },
    adminLogin() {
      this.$axios.post("/admin/login", this.admin).then((res) => {
        if (res.data.code == 200) {
          //我们session中只有一个key:admin,值是可变的
          sessionStorage.setItem("admin", JSON.stringify(res.data.data));
          this.$router.push("/home");
        } else {
          alert(res.data.message);
        }
      });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.dl {
  float: right;
}
.el-form {
  width: 90%;
}
.Login {
  height: 100%;
  width: 100%;
  background-color: #1a4c6b;
}

.con {
  width: 450px;
  height: 300px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.con_top {
  height: 130px;
  width: 130px;
  border-radius: 50%;
  border: 10px solid white;
  background-color: #eeeeee;
  overflow: hidden;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, 50%);
  box-shadow: 0 2px 10px rgba(114, 114, 114);
}

.con_top img {
  height: 130px;
}

.el-form {
  margin-top: 100px;
}

.login {
  float: right;
  margin-right: 38px;
}
</style>